<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content />
      </div>
    </template>
  </div>
</template>

<script>
// fade/zoom 等
// 按需引入
import "element-ui/lib/theme-chalk/base.css";
// collapse 展开折叠
import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
import Vue from "vue";
import { clearLoginInfo } from "@/utils";

Vue.component(CollapseTransition.name, CollapseTransition);

import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'

export default {
    components: {
      MainNavbar,
      MainSidebar,
      MainContent,
    },
    data() {
        return {
            loading: false
        };
    },
    computed: {
        documentClientHeight: {
            get () { return this.$store.state.common.documentClientHeight },
            set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
        },
        sidebarFold: {
            get () { return this.$store.state.common.sidebarFold }
        },
        userName() {
            return sessionStorage.userName;
        },
        role() {
            return sessionStorage.role;
        },
        mode() {
            // horizontal / vertical
            return this.mobile ? "vertical" : "horizontal";
        }
    },
    mounted() {
        this.resetDocumentClientHeight();
        // window.onresize = this.resetDocumentClientHeight;
    },
    methods: {
        // 重置窗口可视高度
        // resetDocumentClientHeight() {
        //     let width = document.documentElement["clientWidth"];
        //     this.mobile = width <= 720;
        //     if (width >= 720) this.navBtnActive = false;
        // },
         resetDocumentClientHeight () {
            this.documentClientHeight = document.documentElement['clientHeight']
            window.onresize = () => {
            this.documentClientHeight = document.documentElement['clientHeight']
            }
        },
        exit() {
            this.$confirm("是否退出", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: this.mobile
            }).then(() => {
                // this.$router.push({ path: '/login' })
                this.$router.replace({ path: "/login" });

                clearLoginInfo();
                this.$message({
                    type: "success",
                    message: "退出成功，请重新登录!",
                    center: this.mobile
                });
            });
        },

        // 导航栏菜单点击
        menuClick(menu) {
            console.log("menu", menu);
            if (menu.path) {
                this.$router.push({ path: menu.path });
            }
        }
    }
};
</script>

<style lang="scss">
/*
.site-header {
    // position: fixed;
    width: 100%;
    height: 45px;
    background: #262626;
    // z-index: 99999;
    .nav {
        display: flex;
        justify-content: space-between;
        &.mobile {
            display: none;
        }
        &.nav-active {
            display: block;
        }
        .el-menu {
            // background: rgba(0, 0, 0, 0)
            background: #262626;
            color: #909399;
            .el-menu-item {
                color: #909399;
            }
        }
        .el-menu--horizontal .el-menu-item,
        .el-menu .el-menu-item {
            height: 45px;
            line-height: 45px;
            &:hover,
            &.is-active,
            &:not(.is-disabled):focus,
            &:not(.is-disabled):hover {
                color: #3d91ff;
                background: rgba(255, 255, 255, 0);
                // background: #262626;
                border-bottom: 0;
            }
            // &.is-active {
            // 	border-bottom: 1px solid #3d91ff;
            // }
        }
    }
    .fold {
        position: absolute;
        display: none;
        right: 5px;
        font-size: 30px;
        line-height: 45px;
        z-index: 999;
    }
    .navbar-menu-right {
        float: right;
        z-index: 998;
    }
}

.site-conten {
    // padding-top: 45px;
    // padding: 10px;
    height: 100%;
}
@media screen and (max-width: 720px) {
    .site-header {
        .nav {
            display: block;
            transition: all 3s;
            .navbar-menu-right.el-menu {
                width: 100%;
            }
        }

        .fold {
            display: block;
            color: #c3d9dd;
            cursor: pointer;
        }
    }
}*/
</style>

